{include file="$header" /}
<el-container :class="{'collapse': isCollapse}">
	<el-aside class="mk-aside" width="220px">
        <a href="{$domain}" target="_blank"><div class="mk-aside-logo-warp"><div></div></div></a>
        <div class="mk-aside-welcome wow-bg-rtol">
            <div>欢迎您，{$userInfo['nickname']}</div>
            <div><a class="copyright-font" href="{$api}" target="_blank">OneKeyAdmin&nbsp;一键式管理系统</a></div>
        </div>
        <el-menu
            class="mk-aside-menu"
            :unique-opened="true"
            :default-active="path"
            :collapse="isCollapse"
            background-color="#474747"
            text-color="#fff"
            active-text-color="#ffd04b"
            @select="clickMenu">
            <template v-for="(item, index) in menus" :key="index">
                <template v-if="item.children">
                    <el-submenu :index="item.path" :key="item.path">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span slot="title">{{item.title}}</span>
                        </template>
                        <template v-for="(subItem,subIndex) in item.children" :key="subIndex">
                            <el-submenu
                                v-if="subItem.children"
                                :index="subItem.path"
                                :key="subItem.path">
                                <template slot="title">{{subItem.title}}</template>
                                <el-menu-item
                                    v-for="(threeItem,i) in subItem.children"
                                    :key="i"
                                    :index="threeItem.path">
                                    {{threeItem.title}}
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item
                                v-else
                                :index="subItem.path"
                                :key="subItem.path">
                                {{subItem.title}}
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.path" :key="item.path">
                        <i :class="item.icon"></i>
                        <span slot="title">{{item.title}}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
        <div class="mk-aside-copyright">
        	<span>V&nbsp;{{version}}</span>
        	<div><a class="copyright-font" href="{$api}" target="_blank">由&nbsp;万旗网&nbsp;提供技术支持</a></div>
        </div>
    </el-aside>
	<el-container>
		<el-header class="mk-header">
			<mk-notice :list="horn"></mk-notice>
	        <ul class="mk-nav">
				<li class="mk-nav-item">
					<mk-userinfo :cover="userCover" @click-path="clickMenu($event)"></mk-userinfo>
	            </li>
	            <li class="mk-nav-item">
	            	<mk-language :language="language" :lang-allow="langAllow"></mk-language>
	            </li>
	        </ul>
	    </el-header>
	    <div class="mk-navigation">
	        <span
	            class="mk-btn-full-screen"
	            :title="isCollapse ? '伸展' : '全屏'"
	            @click="isCollapse = !isCollapse">
	            <i></i>
	        </span>
	        <el-tabs
	            class="mk-header-tabs"
	            v-model="path"
	            type="card"
	            closable
	            @tab-remove="removeTab">
	            <el-tab-pane
	                v-for="(item, index) in tabs"
	                :key="item.path"
	                :name="item.path"
	                :label="item.title">
	            </el-tab-pane>
	        </el-tabs>
	        <el-main>
				<iframe class="mk-iframe" :src="admin_url(path)"></iframe>
			</el-main>
	    </div>
	</el-container>
</el-container>
{include file="$component" /}
<script>
	var menusInit = {:json_encode($menus)};
	var parentVm = new Vue({
		el: '#app',
		data () {
	        return {
	            path: "",
	            tabs: [],
	            language: language,
	            langAllow: langAllow,
	            userCover: userInfo.cover,
	            menus: tree.convert(menusInit),
	            isCollapse: false,
	            storageTime: 240*60*60*1000,
	            horn: {:json_encode($notification)},
	        }
	    },
	    created() {
	    	this.init();
	    },
	    methods: {
	    	/**
	    	 * 初始化
	    	 */
	    	init() {
	    		let route = window.location.hash === "" ? '#console/index' : window.location.hash;
		    	let index = common.arrayIndex(this.menus, 'console/index', 'path');
		    	let tabsCache = storage.get("adminTabs");
		    	let collapseCache = storage.get("adminCollapse");
		        this.path = route.replace('#', '');
		        this.isCollapse = collapseCache === null ? false : collapseCache;
				this.tabs = tabsCache == null ? [this.menus[index]] : tabsCache;
	    	},

	        /**
	         * 点击菜单
	         * @param  {Object} path 路径
	         */
	        clickMenu(path) {
	            if (path !== this.path) {
	                let arr   = tree.getNode(this.menus, path, 'path');
	                let index = common.arrayIndex(this.tabs, path, 'path');
	                this.path = arr['path'];
	                if (index === -1) this.tabs.push(arr);
	            }
	        },

	        /**
	         * 删除导航项
	         * @param  {String} targetName 导航项
	         */
	        removeTab(targetName) {
	            let index = common.arrayIndex(this.tabs, targetName, 'path');
	            this.tabs.splice(index, 1);
	            if (targetName === this.path) this.path = this.tabs[index-1]['path'];
	        },
	    },
	    watch: {
	    	tabs(v) {
	    		storage.set("adminTabs", v, this.storageTime);
	    	},
	    	isCollapse(v) {
	    		storage.set("adminCollapse", v, this.storageTime);
	    	},
	    	path(v) {
	    		window.location.hash = v;
	    	},
	    }
	})
</script>
{include file="$footer" /}